<template>
  <div>
    jerry:{{ count }}
    <div>jerry:{{ jerryCount }}tom:{{ tomCount }}</div>
    <button @click="add">+2</button>
  </div>
</template>

<script>
import bus from '@/utils/eventBus.js'
import { mapState } from 'vuex'
export default {
  data() {
    return {

    }
  },
  computed: {
    /* count() {
      return this.$store.state.jerryCount
    } */
    /*  等效于
    jerryCount () {
      return this.$store.state.jerryCount
    }
    tomCount () {
      return this.$store.state.tomCount
    } */
    ...mapState(['jerryCount', 'tomCount'])
  },
  mounted() {
    bus.$on('add-jerry', data => { this.count += data })
  },
  methods: {
    add() {
      // bus.$emit('add-tom', 2)
      // this.$store.commit('addTom', 3)
      this.$store.dispatch('addTomSync', 3)
    }
  }
}
</script>

<style>

</style>
